<template>
<transition name="fade">
  <div class="notification" :style="style" v-show="visible">
    <span class="content">{{content}}</span>
    <a class="btn" @click="handleClose">{{btn}}</a>
  </div>
</transition>

</template>
<script>
  export default {
    name: 'Notification',
    props: {
      content: {
        type: String,
        required: true
      },
      btn: {
        type: String,
        default: "关闭"
      }
    },
    data () {
      return {
        visible: true
      }
    },
    computed: {
      style () {
        return {}
      }
    },
    methods: {
      handleClose (e) {
        e.preventDefault();
        this.$emit('close')
      }
    }

  }
</script>
<style>
.notification{
  border: 1px solid #ccc;
  min-width: 200px;
  transition: all .3s
}
.fade-enter-active,.fade-leave-active{
  transition: opacity .5s
}
.fade-enter,.fade-leave-to{
opacity: 0;
}
</style>
